<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JTOPO我的测试</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
    $(document).ready(function () {

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window
            .webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        JTopo.Link.prototype.drawanimepic = function (imgurl, scene, width, height, ) {
            var imgnode = new JTopo.Node();
            imgnode.setSize(width ? width : 16, height ? height : 16)
            imgnode.setImage(imgurl);
            imgnode.zIndex = 2.5;
            var thislink = this;
            this.isremove = false;


            thislink.removeHandler = function () {
                this.isremove = true;
                var a = this;
                this.nodeA && this.nodeA.outLinks && (this.nodeA.outLinks = this.nodeA.outLinks.filter(
                        function (b) {
                            return b !== a
                        })),
                    this.nodeZ && this.nodeZ.inLinks && (this.nodeZ.inLinks = this.nodeZ.inLinks.filter(
                        function (b) {
                            return b !== a
                        }));
                var b = d(this);
                b.forEach(function (a, b) {
                    a.nodeIndex = b
                })
            };

            function imgnodeanime() {
                if (!thislink.isremove) {
                    if (thislink.nodeA.outLinks) {
                        var xs = thislink.nodeA.cx - thislink.nodeZ.cx,
                            xy = thislink.nodeA.cy - thislink.nodeZ.cy,
                            l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
                            j = l;
                        xl = xs / l,
                            yl = xy / l;
                        var animespeed = (new Date() / 33);
                        var colorpoint = parseInt(animespeed % l);

                        imgnode.rotate = (Math.atan(xy / xs)) + (xs > 0 ? Math.PI : 0);
                        
                        
                        // if((colorpoint * xl)<j){
                        //     debugger
                        //     imgnode.cx = thislink.nodeA.cx - colorpoint * xl;
                        //     imgnode.cy = thislink.nodeA.cy;
                        //     window.requestAnimationFrame(imgnodeanime);
                        // }
                         if((imgnode.cx- thislink.nodeA.cx)<=xs){
                            imgnode.cx = thislink.nodeA.cx - colorpoint * xl;
                            imgnode.cy = thislink.nodeA.cy;
                         }
                        else{
                            imgnode.cx = thislink.nodeA.cx-xs;
                            imgnode.cy = thislink.nodeA.cy - colorpoint * yl;
                        }
                        window.requestAnimationFrame(imgnodeanime);
                        

                        // imgnode.cx = thislink.nodeA.cx - colorpoint * xl;
                        // imgnode.cy = thislink.nodeA.cy - colorpoint * yl;
                        // window.requestAnimationFrame(imgnodeanime);

                    }
                } else {
                    scene.remove(imgnode)
                }
            }

            window.requestAnimationFrame(imgnodeanime);
            scene.add(imgnode);
            return imgnode;
        };


        CanvasRenderingContext2D.prototype.JtopoDrawPointPath = function (a, b, c, d, e, f) {
            var animespeed = (new Date()) / 50;
            var xs = c - a,
                xy = d - b,
                l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
                colorlength = 5,
                j = l;
            xl = xs / l,
                yl = xy / l;
            var colorpoint = animespeed % (l + colorlength) - colorlength;
            for (var i = 0; i < j; i++) {
                if (((i) > colorpoint) && ((i) < (colorpoint + colorlength))) {
                    this.beginPath();
                    this.strokeStyle = e;
                    this.moveTo(a + (i - 1) * xl, b + (i - 1) * yl);
                    this.lineTo(a + i * xl, b + i * yl);
                    this.stroke();
                } else {
                    this.beginPath();
                    this.strokeStyle = f;
                    this.moveTo(a + (i - 1) * xl, b + (i - 1) * yl);
                    this.lineTo(a + i * xl, b + i * yl)
                    this.stroke();
                }
            }
        };

        CanvasRenderingContext2D.prototype.JTopoDashedLineTo = function (a, b, c, d, e) {
            var animespeed = (new Date()) / 100;
            "undefined" == typeof e && (e = 5);
            var f = c - a, //x轴差
                g = d - b, //y轴差
                h = Math.floor(Math.sqrt(f * f + g * g)), //勾股定理,直线长度
                i = 0 >= e ? h : h / e, //虚线段数
                j = g / h * e,
                k = f / h * e;
            this.beginPath();
            animespeed = animespeed % (e * 2);
            var txs = -f / h * animespeed;
            var tys = -g / h * animespeed;
            for (var l = 0; i > l + 1; l++) {
                /*  从右到左和从下往上流动效果为线段增长
                l % 2 ? this.lineTo(a + l * k-txs, b + l * j-tys) : this.moveTo((a + l * k-txs)>(a+i*k)?(a + l * k):(a + l * k-txs), (b + l * j-tys)>(b + i * j)?(b + l * j):(b + l * j-tys))*/
                /*此处没问题*/
                l % 2 ? this.lineTo(a + l * k - txs, b + l * j - tys) : this.moveTo((a + l * k - txs), (b +
                    l * j - tys))
            };
            this.stroke()
        };


        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas);
        //显示工具栏
        //showJTopoToobar(stage);

        var scene = new JTopo.Scene();
        scene.background = './img/bg.jpg';

        function node(x, y, img, name) {
            var node = new JTopo.Node(name);
            node.setImage('./img/pstn/' + img, true);
            node.setLocation(x, y);
            scene.add(node);
            return node;
        }

        function linkNode(nodeA, nodeZ) {
            var link = new JTopo.FoldLink(nodeA, nodeZ);
            //link.dashedPattern = 5;  //对应 JTopoDashedLineTo
            //link.PointPathColor="rgb(255,0,255)";  //对应JtopoDrawPointPath
            link.drawanimepic("img/testspecialline1.png", scene); //对应drawanimepic
            link.lineWidth = 3;
            link.strokeColor = '255,255,0';
            scene.add(link);
            return link;
        }

        var s1 = node(49, 41, 'satellite_antenna.png', 'Satellitte Feed');
        var s2 = node(57, 136, 'antenna.png', 'Off air');
        var s3 = node(57, 251, 'msc.png', 'Programing');

        var r1 = node(143, 43, 'router.png');
        var r2 = node(143, 63, 'router.png');
        r2.alarm = '2 W';
        var r3 = node(143, 83, 'router.png');
        var r4 = node(143, 103, 'router.png');
        var r5 = node(143, 123, 'router.png', 'Encoder');

        var r6 = node(243, 123, 'router.png', 'Scrambler');
        linkNode(r1, r6);
        linkNode(r2, r6);
        linkNode(r3, r6);
        linkNode(r4, r6);
        linkNode(r6, r5);

        var r7 = node(143, 180, 'router.png');
        var r8 = node(143, 200, 'router.png');
        linkNode(r7, r6);
        linkNode(r8, r6);

        var dataCloud = node(316, 113, 'cloud.png');
        scene.add(new JTopo.Link(dataCloud, r6));

        var tw130 = node(436, 107, 'tw130.png');
        scene.add(new JTopo.Link(tw130, dataCloud));

        var pstn = node(316, 176, 'cloud.png');
        linkNode(pstn, tw130);

        var wdm = node(525, 114, 'wdm.png', 'WDM');
        scene.add(new JTopo.Link(wdm, tw130));

        var testing = node(568, 128, 'testing.png');
        testing.alarm = '1 M';
        scene.add(new JTopo.Link(testing, wdm));

        var wdm2 = node(607, 114, 'wdm.png', 'WDM');
        scene.add(new JTopo.Link(wdm2, testing));

        var mainframe = node(654, 152, 'mainframe.png');
        linkNode(mainframe, wdm2);

        var phone = node(738, 173, 'phone.png', 'Phone');
        linkNode(phone, mainframe);

        var host = node(730, 225, 'host.png', 'Pc');
        linkNode(host, mainframe);

        var router2 = node(706, 282, 'router2.png', 'STB');
        router2.alarm = "1 W";
        router2.alarmColor = '0,255,0';
        linkNode(router2, mainframe);

        var terminal = node(669, 326, 'terminal.png', 'IPTV/SDV');
        linkNode(terminal, router2);

        var modem = node(623, 49, 'modem.png', 'Modem');
        var pc = node(742, 7, 'host.png');
        var router3 = node(671, 73, 'router2.png');
        var terminal3 = node(736, 100, 'terminal.png');

        linkNode(pc, modem);
        linkNode(router3, modem);
        linkNode(terminal3, router3);
        stage.add(scene);
    })
</script>

<body>
    <canvas width="800" height="500" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;">
    </canvas>
</body>

</html>